<template>
	<view class="content">
		<view class="" v-show="!loadShow">
			<view class="vtop">
				<view class="title  u-flex" style=" padding-left: 40rpx;text-align: left;"  >
					<text>猫优壁纸</text>
					<u-icon class="u-p-l-15" name="/static/icon/share.png" size="40"></u-icon>
					<button open-type="share" style="position: absolute;top: 20rpx;left: 230rpx;width: 50rpx;height: 50rpx;opacity: 0;"></button>
				</view>
			</view>
			<view class="" :style="{height: 'calc('+menuButtonInfo.top+'px + 80rpx)'}"></view>
			<view class="ranking  u-flex  "  style="text-align: left;padding: 0 40rpx 0pt 40rpx;">
				<view class="tab u-flex-col u-col-center u-row-center" hover-class="cate-active" hover-stay-time="50" @click="listClick('ranking','','hot')">
					<view class="">热门榜</view>
					<view class=" u-p-t-10 eng" style="font-size: 18rpx;">Hot download</view>
				</view>
				<view class="tab u-flex-col u-col-center u-row-center" hover-class="cate-active" hover-stay-time="50" @click="listClick('ranking','','zan')">
					<view class="">点赞榜</view>
					<view class="u-font-10 u-p-t-10 eng" style="font-size: 18rpx;">Like ranking</view>
				</view>
				<view class="tab u-flex-col u-col-center u-row-center" hover-class="cate-active" hover-stay-time="50" @click="listClick('ranking','','coll')">
					<view class="">收藏榜</view>
					<view class="u-font-10 u-p-t-10 eng" style="font-size: 18rpx;">Collection ranking</view>
				</view>
			</view>
			<view class="tags " style="padding: 40rpx 40rpx 0 40rpx;">
				<view class="u-font-18">标签</view>
				<view class="u-flex u-row-left u-flex-wrap u-p-t-30">
					<view class="tag" @click="listClick('tags','','',item.name)" v-for="(item, index) in zodiacList" :key="index">{{item.name}}</view>
				</view>
			</view>
			<view class="category  "  style="padding: 40rpx 20rpx 0 20rpx;">
				<view class="u-font-18 ">分类</view>
				<view class=" u-row-left u-flex-wrap " style="display: flex;flex-wrap: wrap;flex-direction: row;justify-content:space-between;	">
					<view class="cate" @click="listClick('category',index,item._id,item.name)" v-for="(item, index) in categoryList" :key="index">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="texts">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 180rpx;"></view>
		</view>
		<view class="loading_page" v-show="loadShow">
			<image src="/static/loading/loading.gif"></image>
		</view>
		
		 
	</view>
</template>

<script>
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	
 
	export default {
		components:{
		 
		},
		data() {
			return {
				menuButtonInfo: menuButtonInfo,
				loadShow: true,
				// 分类页数据
				zodiacList: [], 
				categoryList: [],
			}
		},
		async onShow() {
			let that = this
			let res = await uniCloud.callFunction({
				name: 'timing-add',
				data: {
					
				},
			}) 
			console.log('获取apis数据')
			console.log('result', res.result)
		},
		async onLoad() { 
			let that = this
			await that.getZodiacList()
			await that.getCateList()
			await that.getTag()
			that.loadShow = false
		},
		methods: {
			//标签
			async getTag(){
				let that = this
				const db =await uniCloud.database();
				let tags = await db.collection('myou-tags').get()
				that.zodiacList = tags.result.data
				console.log('tags',tags.result.data)
			},
			// 分类
			async getZodiacList(){
				let that = this
				let list = await uniCloud.callFunction({
					name: 'query_list',
					data: {
						dbName: "wx_tags",
						order: {
							"name": 'time',
							"type": "asc"
						},
						pageIndex: 1,
						pageSize: 12
					},
				})
				that.zodiacList = list.result.data
			},
			async getCateList(){
				let that = this
				let list = await uniCloud.callFunction({
					name: 'query_list',
					data: {
						dbName: "myou-img-category",
						pageIndex: 1,
						pageSize: 20,
						order: {
							name: 'sort',
							type: 'desc'
						}
					}
				})
				that.categoryList = list.result.data
			},
			async listClick(type,pid,id,categoryName){ 
				uni.setStorageSync("categoryList",this.categoryList)
				uni.navigateTo({
					url:"/pages_a/cateoryList/cateoryList?categoryName="+categoryName+"&type=category"
					// url: '/pages/categoryList/categoryList?type='+type+'&pid='+pid+'&id='+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni_modules/uview-ui/libs/css/common.scss";
	.u-flex {
		display: flex;
	}
	.vtop{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 999999;
		.title{
			position: relative;
			color: #303030;
			font-size: 24px;
			line-height: 80rpx;
		}
		.search{
			background: #F3F4F5;
			height: 68rpx;
			margin: 20rpx 40rpx 15rpx 40rpx;
			padding-left: 40rpx;
			border-radius: 50px;
			text{
				color: #a6a7a8;
				font-size: 14px;
			}
		}
	}
	.ranking{
		.tab{
			width: 225rpx;
			height: 100rpx;
			border-radius: 12rpx;
			color: #FFFFFF;
			.eng{
				color: #F5F5F5;
			}
		}
		.tab:nth-child(1){
			background-image: linear-gradient(to bottom right, #8acfaf, #5FBB92, #5FBB92, #8acfaf);
			margin-right: 10rpx;
		}
		.tab:nth-child(2){
			background-image: linear-gradient(to bottom right, #f0d35c, #F0B347, #F0B347, #f0d35c);
			margin-right: 10rpx;
		}
		.tab:nth-child(3){
			background-image: linear-gradient(to bottom right, #8c99de, #836AF0, #836AF0, #8c99de);
		}
	}
	.tags{
		.tag{
			font-size: 14px;
			background-color: #F5F6F8;
			color: #909399;
			border-radius: 40rpx;
			line-height: 60rpx;
			padding: 0 32rpx;
			text-align: center;
			margin-right: 12rpx;
			margin-bottom: 12rpx;
		}
	}
	.category{
		.cate{
			position: relative;
			margin-right: 10rpx;
			margin-left: 10rpx;
			margin-bottom: 20rpx;
			image{
				display: block;
				width: 325rpx;
				height: 160rpx;
				border-radius: 12rpx;
			}
			.texts{
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
				color: #FFFFFF;
			}
		}
	}
	.cate-active{
		transform:scale(0.95);
		transition: all 0.2s;
	}
</style>
